<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@taglib prefix="s" uri="/struts-tags" %>
<%@ taglib prefix="shiro" uri="http://shiro.apache.org/tags" %>
<%
    String path = request.getContextPath();
    String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
 <div id="myChart"  style="height:400px"></div>
   <script type="text/javascript">
        myChart.clear();

           require.config({
               paths: {
                   echarts: '../resource/echart'
               }
           });

          require(
                        [
                            'echarts',
                            'echarts/chart/bar', // 使用柱状图就加载bar模块，按需加载
                            'echarts/chart/line'
                        ],
                        function (ec) {
                            // 基于准备好的dom，初始化echarts图表
                            myChart = ec.init(document.getElementById('myChart'));
                            option = {
            					timeline:{
            						data: [''],
            						label : {
            							formatter : function(s) {
            							     return s;
            							    // return s.slice(0, 4);
            							}
            						},
            						autoPlay : true,
            						playInterval : 1000
            					},
            					options:[
            						{
            							title : {
            								'text':'',
            								subtext: '单位:条'
            							},
            							tooltip : {'trigger':'axis'},
            							legend : {
            								x:'right',
            								'data':['正常','非正常'],
            								'selected':{
            									'正常':true,
            									'非正常':true
            								}
            							},
            							toolbox : {
            								'show':true,
            								orient : 'vertical',
            								x: 'right',
            								y: 'center',
            								'feature':{
            									'mark':{'show':true},
            									'dataView':{'show':true,'readOnly':false},
            									'magicType':{'show':true,'type':['line','bar','stack','tiled']},
            									'restore':{'show':true},
            									'saveAsImage':{'show':true}
            								}
            							},
            							calculable : true,
            							grid : {'y':80,'y2':100},
            							xAxis : [{
            								'type':'category',
            								'axisLabel':{'interval':0},
            								'data':[
            									'1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月'
            								]
            							}],
            							yAxis : [
            								{
            									'type':'value',
            									'name':''
            								},
            								{
            									'type':'value',
            									'name':''
            								}
            							],
            							series : [
            								{
            									'name':'正常',
            									'type':'bar',
            									'markLine':{
            										symbol : ['arrow','none'],
            										symbolSize : [4, 2],
            										itemStyle : {
            											normal: {
            												lineStyle: {color:'orange'},
            												barBorderColor:'orange',
            												label:{
            													position:'left',
            													formatter:function(params){
            														return params.value;
            													},
            													textStyle:{color:'orange'}
            												}
            											}
            										},
            										'data':[{'type':'average','name':'平均值'}]
            									},
            									'data':[]
            								},
            								{
            									'name':'非正常','yAxisIndex':1,'type':'bar',
            									'data': []
            								}
            							]
            						}
            					]
            				};
                   myChart.showLoading({text:'正在努力加载...'});
                   // 为echarts对象加载数据
                   myChart.setOption(option);
                 //  console.log(option);

                   setTimeout(function(){
                   getChartData();//ajax后台交互
                 },200);

               }
           );

           function getChartData() {
                       //获得图表的options对象
                       // var options = myChart.getOption();
                       //  console.log(options);
                        cloneOption = cloneObj(option);
                      //  console.log( cloneOption);
                       var proInfoId = $('#proInfoId').val();
                       //通过Ajax获取数据
                       $.ajax({
                           type : "post",
                           async : false, //同步执行
                           url : "ajax-pro-back!getChartDataByYear.action",
                           data : {'proInfoId':proInfoId},
                           dataType : "json", //返回数据形式为json
                           success : function(result) {
                               if (result) {
                                  // alert(result);
                                   var rs = result.options;
                                 //  console.log(rs);
                                   cloneOption.options[0].title.text = rs[0].title;
                                   cloneOption.timeline.data = result.timeline;
                                   var rs_series_first = rs[0].series;
                                   for (var m=0; m<rs_series_first.length; m++){
                                         var obj = rs_series_first[m].data;
                                         cloneOption.options[0].series[m].data  = dataFormatter(rs_series_first[m].data);
                                    }
                                    for(var i=1; i<rs.length; i++){
                                        cloneOption.options.push({title : {'text':rs[i].title},series : []});
                                         var rs_series = rs[i].series;
                                         for(var j=0; j<rs_series.length;j++){
                                             cloneOption.options[i].series.push( {'data':dataFormatter(rs_series[j].data)} );
                                                //  var obj = rs_series[j].data;
                                          }
                                    }
                                    myChart.setOption(cloneOption);
                                  //  console.log(cloneOption);
                               }

                               myChart.hideLoading();
                           },
                           error : function(errorMsg) {
                               alert("图表数据失败");
                               myChart.hideLoading();
                           }
                       });
                   }


       </script>